.index {
  height: 100%;

  .moveR-enter-active,
  .moveR-leave-active {
    transition       : all 0.2s linear;
    transform        : translateX(0);
    -ms-transform    : translateX(0);
    -moz-transform   : translateX(0);
    -webkit-transform: translateX(0);
    -o-transform     : translateX(0);
  }

  .moveR-enter,
  .moveR-leave {
    transform        : translateX(100%);
    -ms-transform    : translateX(100%);
    -moz-transform   : translateX(100%);
    -webkit-transform: translateX(100%);
    -o-transform     : translateX(100%);
  }

  .moveR-leave-to {
    transform        : translateX(100%);
    -ms-transform    : translateX(100%);
    -moz-transform   : translateX(100%);
    -webkit-transform: translateX(100%);
    -o-transform     : translateX(100%);
  }

  .bounce-enter-active {
    animation        : bounce-in .2s;
    -ms-animation    : bounce-in .2s;
    -moz-animation   : bounce-in .2s;
    -webkit-animation: bounce-in .2s;
    -o-animation     : bounce-in .2s;
  }

  .bounce-leave-active {
    animation        : bounce-in .2s reverse;
    -ms-animation    : bounce-in .2s reverse;
    -moz-animation   : bounce-in .2s reverse;
    -webkit-animation: bounce-in .2s reverse;
    -o-animation     : bounce-in .2s reverse;
  }

  .component-fade-enter-active,
  .component-fade-leave-active {
    transition        : opacity .2s ease;
    -ms-transition    : opacity .2s ease;
    -moz-transition   : opacity .2s ease;
    -webkit-transition: opacity .2s ease;
    -o-transition     : opacity .2s ease;
  }

  .component-fade-enter,
  .component-fade-leave-to

  /* .component-fade-leave-active for below version 2.1.8 */
    {
    opacity: 0;
  }

  @keyframes bounce-in {
    0% {
      transform: scale(0);
    }

    50% {
      transform: scale(1.5);
    }

    100% {
      transform: scale(1);
    }
  }


  .right-enter, .right-leave-to {
    transform: translate3d(100%, 0, 0)
  }
  .right-leave, .right-enter-to {
    transform: translate3d(0, 0, 0)
  }
  .right-enter-active, .right-leave-active {
    transition: all .2s
  }


  .nav-top-show {
    height         : 60px;
    display        : flex;
    flex-direction : row;
    justify-content: space-between;
    flex           : 1;
  }

  .app-view {
    flex   : 1;
    display: flex;
    height : 100%;

    .app-view-left {
      overflow-y     : auto;
      scrollbar-width: none;
      /* firefox */
      // -ms-overflow-style: none; /* IE 10+ */
      overflow-x           : hidden;
      background-color     : #5c5b65;
    }

    .app-view-left::-webkit-scrollbar {
      display: none
    }

    .logo {
      width           : 180px;
      text-align      : center;
      background-color: #5c5b65;
      border-bottom   : 1px solid hsla(0, 0%, 100%, 0.2);
      overflow        : hidden;
      transition      : all 0.05s;
      height: 59px;
    }

    .nav-r-top {
      background-color: #4280f2;
      flex            : 1;
      display         : flex;
      flex-direction  : row;
      justify-content : space-between;
      height          : 64px;

      .l-flex {
        display            : flex;
        -ms-flex-item-align: center;
        align-items        : center;
        min-width          : 400px;
        display            : flex;
        flex-direction     : row;
        cursor             : pointer;

        .show_icon {
          width           : 25px;
          height          : 30px;
          transform       : rotate(0deg);
          transition      : 0.38s;
          transform-origin: 50% 50%;
          margin          : 0 25px;
        }

        .show_icons {
          width           : 25px;
          height          : 30px;
          transform       : rotate(90deg);
          transition      : 0.38s;
          transform-origin: 50% 50%;
          margin         : 0px 15px;
        }
      }

      // 退出登录
      .log_out {
        display        : flex;
        width          : 400px;
        flex-direction : row;
        justify-content: space-between;
        font-size      : 14px;
        align-items    : center;
        color          : #ffffff;
        margin-right   : 40px;

        .login_user_title {
          width          : 300px;
          justify-content: space-around;
          color          : #ffffff;

          .el-dropdown-link {
            cursor: pointer;
            color : #ffffff;
          }

          .el-icon-arrow-down {
            font-size: 12px;
          }

          .demonstration {
            display      : block;
            color        : #8492a6;
            font-size    : 14px;
            margin-bottom: 20px;
          }
        }

        .log_out_btn {
          width        : 80px;
          height       : 35px;
          line-height  : 35px;
          text-align   : center;
          background   : #ffffff;
          border-radius: 30px;
          color        : #4280f2;
          cursor       : pointer;
        }
      }
    }

    .el-breadcrumb {
      width: auto;
      color: #fff !important;

      .el-breadcrumb__inner a,
      .el-breadcrumb__inner.is-link {
        color: #fff;
      }

      .el-breadcrumb__inner {
        color: #fff;
      }
    }

    .el-menu {
      border: none;
    }

    .el-menu-vertical-demo {
      background-color: #5c5b65 !important;
      overflow-y      : auto !important;
    }

    .el-menu-vertical-demo:not(.el-menu--collapse) {
      width           : 180px;
      background-color: #5c5b65;
      transition      : border-color 0.3s, background-color 0.3s, color 0.3s;
      color           : #ffffff;
      font-size       : 13px !important;
      scrollbar-width : none;
      /* firefox */
      -ms-overflow-style: none;
      /* IE 10+ */
      overflow-x: hidden;
      overflow-y: auto;

      .el-menu {
        background-color: #5c5b65;

        i {
          color: #ffffff;
        }

        .el-submenu__title:hover,
        .el-submenu__title:focus {
          background-color: #5b5a64 !important;
          color           : white;
        }
      }

      .el-menu-item,
      .el-submenu__title {
        height     : 48px;
        line-height: 48px;
      }

      .el-submenu__title {
        color        : #ffffff;
        border-bottom: 1px solid hsla(0, 0%, 100%, 0.2);
        font-size    : 13px !important;
      }

      i,
      .el-menu-item {
        color    : #ffffff;
        font-size: 13px !important;
      }

      .el-submenu__title:focus{
        background-color:  rgba(36, 42, 49, 0.8) !important;
        color           : white;        
      }
      .el-submenu__title:hover {
        background-color:  #5b5a64 !important;
        color           : white;
      }

      .el-menu-item:focus{
        background-color: rgba(36, 42, 49, 0.8) !important;
        color           : white;
      }
      .el-menu-item:hover{
        background-color: #5b5a64 !important;
        color           : white;
      }

      .el-menu--inline li.el-menu-item {
        color        : #cccccc;
        border-bottom: 1px solid hsla(0, 0%, 100%, 0.2);
      }

      .el-menu--inline {
        background-color: rgb(53, 52, 65);
      }
    }

    .r-view {
      flex            : 1;
      background-color: #eceef2;
      overflow-y      : auto;

      .nav-Toviews::-webkit-scrollbar {
        display: none;
      }

      .nav-Toviews {
        scrollbar-width: none;
        /* firefox */
        -ms-overflow-style: none;
        /* IE 10+ */
        overflow-y: auto;
        flex: 1;
        justify-content: space-between;
        background: #ffffff;
        .close-btn-all{
            width: 105px;
            justify-content: space-around;
            border-left: 1px solid #DCDCDC;
            margin-left: 10px;
          .btn{
              padding: 0px;
              height: 25px;
              border:1px solid #4280f2;
              color: #4280f2;
              width: 80px;
              font-size: 13px;
              justify-content: space-around;
              border-radius: 4px;
              .btn-item{
                    width: 85%;
                    margin: 0  auto;
                    justify-content: space-between;
                    font-size: 12px;
                    img{
                        width: 12px;
                        height: 12px;
                    }
              }
          }
        }
      }

      .nav-Toview {
        height     : 40px;
        background : #ffffff;
        display    : flex;
        padding    : 0px 10px;
        white-space: nowrap;
        flex: 1;
        overflow: hidden;

        .nav-Toview-item {
          height         : 39px;
          line-height    : 40px;
          font-size      : 13px;
          text-align     : center;
          cursor         : pointer;
          margin-left    : 10px;
          display        : flex;
          flex-direction : row;
          justify-content: space-between;
          align-items    : center;
          color          : #333;
          padding-left   : 5px;
          padding-right  : 5px;

          &.activeColor {
            color        : #4280f2;
            border-bottom: 2px solid #4280f2;
          }

          div {
            text-align      : center;
            transition      : all .3s cubic-bezier(.645, .045, .355, 1);
            transform-origin: 100% 50%;
            font-size       : 11px;
            color           : #C0C0C0;
            height          : 15px;
            line-height     : 15px;
            width           : 15px;
            text-align      : center;
            margin-left     : 5px;
          }

          div:hover {
            background-color: #b4bccc;
            color           : #fff;
            border-radius   : 50%;
            height          : 15px;
            line-height     : 15px;
            width           : 15px;
            text-align      : center;
          }

        }
      }
    }

    .login_user_title {
      height     : 25px;
      line-height: 25px;
    }
  }

  .el-image-viewer__wrapper .el-icon-circle-close {
    color: #ffffff;
  }

  .show-title-money{
    color: #595959;
    width: 500px;
    justify-content: space-between;
    font-weight: 600;
    margin-top: 0px;
    margin-bottom: 22px;
    .price{
      color: red;
      padding: 0px 8px;
    }
  }
}
